<template>
  <div v-if="modelValue" class="dialog-overlay" @click="handleOverlayClick">
    <div class="dialog-content" @click.stop>
      <div class="dialog-header">
        <h3 class="dialog-title">系统配置</h3>
        <button class="dialog-close" @click="handleClose">×</button>
      </div>
      
      <div class="dialog-body">
        <!-- 虚拟人配置 -->
        <section class="config-section">
          <h4 class="section-title">虚拟人 SDK 配置</h4>
          
          <div class="form-group">
            <label>应用 APP ID</label>
            <input 
              v-model="localConfig.avatar.appId" 
              type="text" 
              placeholder="请输入 APP ID"
            />
          </div>
          
          <div class="form-group">
            <label>应用 APP Secret</label>
            <input 
              v-model="localConfig.avatar.appSecret" 
              type="text" 
              placeholder="请输入 APP Secret"
            />
          </div>
        </section>

        <!-- ASR配置 -->
        <section class="config-section">
          <h4 class="section-title">语音识别配置</h4>
          
          <div class="form-group">
            <label>ASR 服务商</label>
            <select v-model="localConfig.asr.provider">
              <option value="tx">腾讯云</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>ASR App ID</label>
            <input 
              v-model="localConfig.asr.appId" 
              type="text" 
              placeholder="请输入 ASR App ID"
            />
          </div>
          
          <div class="form-group">
            <label>ASR Secret ID</label>
            <input 
              v-model="localConfig.asr.secretId" 
              type="text" 
              placeholder="请输入 Secret ID"
            />
          </div>
          
          <div class="form-group">
            <label>ASR Secret Key</label>
            <input 
              v-model="localConfig.asr.secretKey" 
              type="text" 
              placeholder="请输入 Secret Key"
            />
          </div>
        </section>

        <!-- LLM配置 -->
        <section class="config-section">
          <h4 class="section-title">大语言模型配置</h4>
          
          <div class="form-group">
            <label>模型选择</label>
            <select v-model="localConfig.llm.model">
              <option 
                v-for="model in supportedModels" 
                :key="model" 
                :value="model"
              >
                {{ model }}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label>API Key</label>
            <input 
              v-model="localConfig.llm.apiKey" 
              type="password" 
              placeholder="请输入 API Key"
            />
          </div>
        </section>
      </div>
      
      <div class="dialog-footer">
        <button @click="handleSave" class="btn btn-primary">
          保存配置
        </button>
        <button @click="handleClose" class="btn btn-secondary">
          取消
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, reactive } from 'vue'
import { SUPPORTED_LLM_MODELS } from '../constants'
import type { AppState } from '../types'

// Props
const props = defineProps<{
  modelValue: boolean
  appState: AppState
}>()

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'save': [config: any]
}>()

// 组件状态
const supportedModels = SUPPORTED_LLM_MODELS

// 本地配置副本
const localConfig = reactive({
  avatar: {
    appId: '',
    appSecret: ''
  },
  asr: {
    provider: 'tx',
    appId: '',
    secretId: '',
    secretKey: ''
  },
  llm: {
    model: SUPPORTED_LLM_MODELS[0],
    apiKey: ''
  }
})

// 监听外部状态变化，更新本地配置
watch(() => props.appState, (newState) => {
  localConfig.avatar.appId = newState.avatar.appId
  localConfig.avatar.appSecret = newState.avatar.appSecret
  localConfig.asr.appId = String(newState.asr.appId)
  localConfig.asr.secretId = newState.asr.secretId
  localConfig.asr.secretKey = newState.asr.secretKey
  localConfig.llm.model = newState.llm.model as any
  localConfig.llm.apiKey = newState.llm.apiKey
}, { deep: true, immediate: true })

// 处理关闭对话框
function handleClose() {
  emit('update:modelValue', false)
}

// 处理点击遮罩层
function handleOverlayClick() {
  handleClose()
}

// 处理保存配置
function handleSave() {
  emit('save', localConfig)
  emit('update:modelValue', false)
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
  border-radius: 8px 8px 0 0;
}

.dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.dialog-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.dialog-close:hover {
  background: #f0f0f0;
  color: #333;
}

.dialog-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
  background: #fafafa;
  border-radius: 0 0 8px 8px;
}

.config-section {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 16px;
  background: #fafafa;
}

.section-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 6px;
}

.form-group {
  margin-bottom: 12px;
}

.form-group:last-child {
  margin-bottom: 0;
}

label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
}

input,
select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  transition: border-color 0.2s;
}

input:focus,
select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #545b62;
}
</style>